<template>
  <sys-header class="home-header" @logo-click="onLogoClick">
    <div class="right-btns">
      <user-info-icon></user-info-icon>
    </div>
  </sys-header>
</template>

<script>
import SysHeader from '@bcom/SysHeader'
import UserInfoIcon from '@bcom/UserInfoIcon'

export default {
  name: 'homeHeader',
  components: {
    UserInfoIcon,
    SysHeader,
  },
  methods: {
    onLogoClick() {
      // this.$router.push({
      //   name: 'BBCS_HOME',
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-header {
  .right-btns {
    position: absolute;
    right: 20px;
    top: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    .btn-item {
      cursor: pointer;
      height: 45px;
      padding: 10px 20px;
      position: relative;
      font-size: 16px;
      img {
        vertical-align: middle;
        display: inline-block;
      }
      .iconfont {
        color: #8c8c8c;
        vertical-align: middle;
        display: inline-block;
        font-size: 18px;
      }
      .btn-txt {
        color: #8c8c8c;
        vertical-align: middle;
        margin-left: 10px;
      }
      &:hover {
        background: rgba($color: #fff, $alpha: 0.2);
      }
    }
    .btn-spliter {
      display: inline-block;
      vertical-align: middle;
      width: 1px;
      height: 12px;
      margin: 0 10px;
      background: rgba($color: #8c8c8c, $alpha: 0.45);
    }
  }
}
</style>
